<template>
  <div>
    <div class="tableDiv">
      <el-row>
        <!-- <el-col :span="6">
          <div class="top-div">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input"></el-input>
          </div>
        </el-col> -->
        <!-- <el-col :span="6">
          <div class="top-div">
            <el-select v-model="value" placeholder="筛选">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col> -->
        <!-- <el-col :span="6">
          <div class="top-div">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-col> -->
        <el-col :span="6">
          <div class="top-div right">
            <!-- <el-link type="primary" style="margin-right:8px">运费结算</el-link>
            <el-link type="success" style="margin-right:8px">对账</el-link>
            <el-link type="primary" style="margin-right:24px">发放工资</el-link> -->
            <el-button type="primary"   size="small" @click="handleClick">运费结算</el-button>
            <!-- <el-button type="danger"   size="small"></el-button> -->
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%" class="custom-table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="a" label="企业名称" width="auto">
            <!-- <template slot-scope="scope">
                <img src="../../assets/nan.jpg" alt="Description" class="img-circle">
                <span>{{scope.row.a}}</span>
            </template> -->

        </el-table-column>
        <el-table-column prop="a1" label="本月派送历程（km）" width="180px"></el-table-column>
        <el-table-column prop="a2" label="派送时长（km）" width="auto"></el-table-column>
         <el-table-column prop="a3" label="总单数" width="auto"></el-table-column>
        <el-table-column prop="a4" label="联系方式" width="auto"></el-table-column>
        <el-table-column prop="a5" label="日期" width="auto"></el-table-column>
        <el-table-column prop="a6" label="运费合计" width="auto"></el-table-column>
         <el-table-column prop="a7" label="状态" width="auto"></el-table-column>

      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="新增" :visible.sync="dialogVisible" width="600px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="70px">
            <el-form-item label="员工姓名">
              <el-input v-model="formInline.user" placeholder="员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="formInline.user" placeholder="联系方式"></el-input>
            </el-form-item>
            <el-form-item label="派送历程">
              <el-input v-model="formInline.user" placeholder="派送历程"></el-input>
            </el-form-item>
             <el-form-item label="派送时长">
              <el-input v-model="formInline.user" placeholder="派送时长"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          a: "宏远",
          a1: "960",
          a2: "358",
          a3: "3260",
          a4: "18814141514",
          a5: "2024/04/10",
          a6: "6005.9",
          a7: "未结算"
        },
        {
          a: "瑞迪",
          a1: "866",
          a2: "358",
          a3: "3260",
          a4: "14814141514",
          a5: "2024/04/11",
          a6: "7005.9",
          a7: "未结算"
        },
       
         {
          a: "UPS",
          a1: "866",
          a2: "358",
          a3: "3260",
          a4: "14814141514",
          a5: "2024/04/11",
          a6: "7005.9",
          a7: "未结算"
        },
          {
          a: "XUD",
          a1: "234",
          a2: "358",
          a3: "3260",
          a4: "14814141514",
          a5: "2024/04/11",
          a6: "2075.9",
          a7: "未结算"
        },
       
       {
          a: "UPS",
          a1: "234",
          a2: "358",
          a3: "3260",
          a4: "14814141514",
          a5: "2024/04/11",
          a6: "2075.9",
          a7: "未结算"
        },
        {
          a: "AUZ",
          a1: "234",
          a2: "358",
          a3: "3260",
          a4: "14814141514",
          a5: "2024/04/11",
          a6: "2075.9",
          a7: "未结算"
        },
        {
          a: "国药",
          a1: "234",
          a2: "358",
          a3: "3260",
          a4: "14814141514",
          a5: "2024/04/11",
          a6: "2075.9",
          a7: "未结算"
        },
      
       
      ],
      input: "",
      formInline: {
        user: "",
        region: ""
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      value1: ""
    };
  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 98%;
  background-color: #fff;
}
.right {
  /* padding-top: 4px; */
  line-height: 32px;
}
.tableDiv {
  background-color: #fff;
  /* margin-top: 20px; */
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}

.img-circle {
  width: 50px; /* 设置图片宽度 */
  height: 50px; /* 设置图片高度，与宽度相等 */
  border-radius: 50%; /* 设置四个角为圆角 */
  object-fit: cover; /* 确保图片内容适合容器大小 */
  vertical-align: middle;
  margin-right: 20px;
}
/deep/ .el-select {
  width: 100%;
  height: 42px;
}
/deep/ .el-date-editor {
  width: 100%;
  
}
/deep/ .el-input__inner {
  height: 32px;
}
/deep/ .el-input__icon {
  line-height: 32px;
}
</style>


